import { VantComponent } from '../common/component'
import { BLUE } from '../common/color'
import { getRect } from '../common/utils'
VantComponent({
  props: {
    inactive: Boolean,
    percentage: {
      type: Number,
      observer: 'setLeft',
    },
    pivotText: String,
    pivotColor: String,
    trackColor: String,
    showPivot: {
      type: Boolean,
      value: true,
    },
    color: {
      type: String,
      value: BLUE,
    },
    textColor: {
      type: String,
      value: '#fff',
    },
    strokeWidth: {
      type: null,
      value: 4,
    },
  },
  data: {
    right: 0,
  },
  mounted() {
    this.setLeft()
  },
  methods: {
    setLeft() {
      Promise.all([getRect(this, '.van-progress'), getRect(this, '.van-progress__pivot')]).then(
        ([portion, pivot]) => {
          if (portion && pivot) {
            this.setData({
              right: (pivot.width * (this.data.percentage - 100)) / 100,
            })
          }
        },
      )
    },
  },
})
